import { ExpertProps } from '@/api/expert';
import { OrderDiyAppointment } from '@/api/order';
import useDateTimeSelector from '@/components/useDateTimeSelector';
import useExpertSelector from '@/components/useExpertSelector';
import { Button, Field } from '@antmjs/vantui';
import { Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useSetState } from 'ahooks';
import { useRequest } from 'taro-hooks';
import './index.less';

export default function Page() {
  const [formValues, setFormValues] = useSetState<{
    expert: ExpertProps | undefined;
    date: string | undefined;
    address: string | undefined;
    remark: string | undefined;
  }>({
    expert: undefined,
    date: undefined,
    address: undefined,
    remark: undefined,
  });

  const { runAsync, loading } = useRequest(OrderDiyAppointment, {
    manual: true,
  });

  const { renderNode: renderExpertSelectorNode, open: openExpertSelector } =
    useExpertSelector({
      onConfirm: function (data) {
        setFormValues({
          expert: data,
        });
      },
    });

  const { renderNode: renderDateTimeNode, open: opeDateTime } =
    useDateTimeSelector({
      onConfirm: function (value) {
        setFormValues({
          date: value,
        });
      },
    });

  return (
    <>
      <View className='pt-4 px-4 pb-4'>
        <View
          className=' absolute right-2 top-2  bg-white rounded-lg text-xs text-primary flex items-center leading-none px-3 py-1'
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/custom/history`,
            });
          }}
        >
          <View
            className='w-[32px] h-[32px] bg-cover mr-1'
            style={{
              backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/custom-2.svg)`,
            }}
          />
          历史定制
        </View>

        <View
          className=' w-[240px] h-[240px] bg-cover mx-auto'
          style={{
            backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/custom-2.png)`,
          }}
        ></View>
        <Text className='w-[500px] block mx-auto text-xs  text-gary4'>
          若平台提供的专家咨询服务无法满足您的时间或者地点的需求，您可以提交定制化咨询的相关信息，平分客服将为您协调相关服务。
        </Text>

        <View onClick={() => openExpertSelector()}>
          <Field
            label='选择专家 *'
            isLink
            className=' rounded-lg mt-4'
            readonly
            value={formValues.expert?.name || '点击选择'}
          />
        </View>

        <View className='p-4 rounded-lg bg-white mt-4'>
          <Text className=' text-sm text-gary3 block'>提交我的需求：</Text>
          <Field
            onInput={(e) => setFormValues({ remark: e.detail })}
            showWordLimit
            maxlength={300}
            className=' rounded-lg mt-2 bg-[#F6F7FB]'
          />
        </View>
      </View>

      <View className=' fixed left-4 right-4 bottom-4 z-10'>
        <Button
          loading={loading}
          type='primary'
          block
          onClick={async () => {
            if (!formValues.expert)
              return Taro.showToast({ title: '请选择专家', icon: 'none' });

            if (!formValues.remark)
              return Taro.showToast({ title: '请输入您的需求', icon: 'none' });

            await runAsync({
              expertId: formValues?.expert?.id,
              remark: formValues.remark,
            });

            Taro.showToast({ title: '提交成功' });
            setTimeout(() => {
              Taro.navigateBack();
            }, 1000);
          }}
        >
          确认提交
        </Button>
      </View>

      {renderExpertSelectorNode()}
      {renderDateTimeNode()}
    </>
  );
}
